<template>
    <div v-move>
        <el-dialog v-model="visible" :show-close="true" :title="props.title" @close="close" :width="props.width">
            <slot></slot>
        </el-dialog>
    </div>
</template>
<script setup>
import { ref, defineProps, defineEmits, watchEffect } from 'vue'
const visible = ref(true)
const props = defineProps({
    title: {
        type: String,
        default: 'dialog'
    },
    isShow: {
        type: Boolean,
        default: false
    },
    width: {
        type: [String, Number],
        default: '50%'
    }
})
const emits = defineEmits(['close'])
watchEffect(() => {
    visible.value = props.isShow
})
const close = () => {
    emits('close')
}
</script>
<style>
.el-dialog header {
    display: flex;
    justify-content: left;
}
</style>